<template>
  <div v-loading="loading">
    <header class="header">
      <img :src="picUrl" alt="" class="img" />
      <h2 class="name">{{ name }}</h2>
      <h4 class="artist">
        <span v-for="item in artist" class="artistName" @click="toSingerPage(item.id)">
          {{ item.name + "     " }}
        </span>
      </h4>

      <p style="font-size: 20px; position: absolute; top: 75px; left: 400px">
        <el-icon style="position: relative; top: 2px; margin-right: 5px"
          ><ChatDotRound
        /></el-icon>
        {{ detailData.commentCount }}
      </p>
      <p style="font-size: 20px; position: absolute; top: 75px; left: 550px">
        <el-icon style="position: relative; top: 2px; margin-right: 5px"
          ><Position /></el-icon
        >{{ detailData.shareCount }}
      </p>
      <p style="font-size: 20px; position: absolute; top: 75px; left: 700px">
        <el-icon style="position: relative; top: 2px; margin-right: 5px"
          ><Folder /></el-icon
        >{{ detailData.subCount }}
      </p>

      <el-button plain class="btn" id="playAll" @click="playAll"> 播放全部 </el-button>
      <el-button plain class="btn" id="openComment" @click="openComment"
        >打开评论</el-button
      >
    </header>

    <el-table :data="tableData" @row-dblclick="dblclick">
      <el-table-column type="index"> </el-table-column>
      <el-table-column label="歌曲如下">
        <template #default="scope">
          <span> {{ scope.row.name }} </span>
          <!-- <span v-show="scope.row.survival === 0" style="color: red">
            (无音源或者可以播放)</span
          > -->
          <span v-show="scope.row.survival === 4" style="color: red">
            (需要购买专辑)</span
          >
          <span v-show="scope.row.survival === 1" style="color: red"> (VIP)</span>
          <img
            src="@/static/img/mv.svg"
            alt=""
            v-show="scope.row.mv !== 0"
            style="width: 20px; position: relative; top: 5px; left: 5px"
            @click="toMVPlayPage(scope.row.mv)"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column prop="artist"> </el-table-column> -->

      <el-table-column>
        <template #default="scope">
          <span
            v-for="item in scope.row.artist"
            class="artistName"
            @click="toSingerPage(item.id)"
          >
            {{ item.name + "     " }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="albumName"> </el-table-column>
      <el-table-column prop="songTime"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs } from "vue";
import { storeToRefs } from "pinia";
import { getSongUrl, getSingerAlbunContent, getSingerAlbumMes } from "@/service/songs";
import { storage } from "../stores/storage";
import { getArtistNames, getSongtime } from "@/utils/practicalFun";
import router from "../router";
export default defineComponent({
  mounted() {
    this.getSingerAlbunContentFun();
  },
  setup() {
    let store = storage();
    let tableData = ref([]);
    let mesData = reactive({
      picUrl: "",
      des: "",
      name: "",
      artist: "",
    });
    let detailData = ref({});
    const loading = ref(true);

    const { albumId } = storeToRefs(store);

    function getSingerAlbumMesFun() {
      getSingerAlbumMes(albumId.value)
        .then((res) => {
          if ((res.status = 200)) {
            const { data } = res;
            detailData.value.commentCount = data.commentCount;
            detailData.value.shareCount = data.shareCount;
            detailData.value.subCount = data.subCount;
          }
        })
        .catch((res) => {
          if (res) ElMessage("网络错误,请重新尝试");
        });
    }

    function getSingerAlbunContentFun() {
      getSingerAlbumMesFun();
      getSingerAlbunContent(albumId.value)
        .then((res) => {
          let mes = res.data.album;
          mesData.picUrl = mes.picUrl;
          mesData.des = mes.description;
          mesData.name = mes.name;
          mesData.artist = getArtistNames(mes.artists);

          let data = res.data.songs;

          for (let i = 0; i < data.length; i++) {
            tableData.value[i] = {};
            tableData.value[i].id = data[i].id;
            tableData.value[i].name = data[i].name;
            tableData.value[i].picUrl = data[i].al.picUrl;
            tableData.value[i].albumName = data[i].al.name;
            tableData.value[i].albumId = data[i].al.id;
            tableData.value[i].artist = getArtistNames(data[i].ar);
            tableData.value[i].songTime = getSongtime(data[i].dt);
            tableData.value[i].survival = data[i].fee;
            tableData.value[i].mv = data[i].mv;
          }
          loading.value = false;
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
    }
    async function dblclick(row) {
      let songUrl = "";
      await getSongUrl(row.id)
        .then((res) => {
          songUrl = res.data.data[0].url;
        })
        .catch((err) => {
          ElMessage("获取错误,请重新尝试");
        });
      if (songUrl) {
        store.addSongPlayList(row.id, row.name, songUrl, row.picUrl);
        store.changeIsImmediatelyPlay();
      }
    }
    function toSingerPage(id) {
      store.setSingerId(id);
      router.push({
        path: "/singer",
      });
    }
    function openComment() {
      albumId.value;
      store.setCommentId(albumId.value);
      store.setCommentsType(3);
      store.setAlbumName(mesData.name);
      store.changeIsShowComment();
    }
    function toMVPlayPage(id) {
      store.setMVId(id);
      router.push({
        path: "/mvplay",
      });
    }
    function playAll() {
      store.setIsPlayAll(true);
      store.clearSongPlayList();
      for (let i = tableData.value.length - 1; i >= 0; i--) {
        dblclick(tableData.value[i]);
      }
      setTimeout(() => {
        store.setIsPlayAll(false);
      }, 2000);
    }
    return {
      getSingerAlbunContentFun,
      toSingerPage,
      ...toRefs(mesData),
      dblclick,
      getSingerAlbumMesFun,
      openComment,
      toMVPlayPage,
      tableData,
      detailData,
      loading,
      playAll,
    };
  },
});
</script>

<style scoped>
.img {
  width: 200px;
  height: 200px;
  margin: 10px;
}
.header {
  position: relative;
  height: 220px;
}
.name {
  position: absolute;
  left: 250px;
  top: 20px;
}
.artist {
  position: absolute;
  left: 250px;
  top: 78px;
}
.artistName {
  white-space: pre;
}
.artistName:hover {
  color: black;
  cursor: pointer;
}
#playAll {
  position: absolute;
  left: 300px;
  top: 150px;
}
#openComment {
  position: absolute;
  left: 450px;
  top: 150px;
}
.btn {
  width: 100px;
  height: 50px;
}

.btn:hover {
  color: black;
  text-decoration: none;
}
</style>
